<template>
  <div class="home-container">
    <!-- 顶部状态栏 -->
    <div class="status-bar">
      <div class="status-left">
        <span class="time">10:01</span>
      </div>
      <div class="status-right">
        <div class="signal-bars">
          <div class="bar"></div>
          <div class="bar"></div>
          <div class="bar"></div>
          <div class="bar"></div>
        </div>
        <span class="network">5G</span>
        <div class="battery">
          <div class="battery-level"></div>
        </div>
      </div>
    </div>

    <!-- 头部导航 -->
    <div class="header-nav">
      <div class="nav-title">
        <span class="active-tab">发现</span>
      </div>
      <div class="nav-right">
        <div class="location">
          <svg class="location-icon" width="16" height="16" viewBox="0 0 24 24" fill="none">
            <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" fill="currentColor"/>
          </svg>
          <span>上海</span>
          <svg class="arrow-down" width="12" height="12" viewBox="0 0 24 24" fill="none">
            <path d="M7 10l5 5 5-5z" fill="currentColor"/>
          </svg>
        </div>
        <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none">
          <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="currentColor"/>
        </svg>
      </div>
    </div>

    <!-- 分类标签页 -->
    <div class="category-tabs">
      <div class="tabs-container">
        <div 
          v-for="tab in tabs" 
          :key="tab.id"
          class="tab-item"
          :class="{ active: activeTab === tab.id }"
          @click="setActiveTab(tab.id)"
        >
          {{ tab.name }}
        </div>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-area">
      <div class="cards-grid">
        <div 
          v-for="card in cards" 
          :key="card.id"
          class="content-card"
          @click="handleCardClick(card)"
        >
          <div class="card-image" :class="card.height">
            <img :src="card.image" :alt="card.title" />
            <div class="views-count">
              <svg class="eye-icon" width="14" height="14" viewBox="0 0 24 24" fill="none">
                <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" fill="white"/>
              </svg>
              <span>{{ card.views }}</span>
            </div>
            <div v-if="card.type" class="card-type">{{ card.type }}</div>
          </div>
          <div class="card-content">
            <div class="card-location">{{ card.location }}</div>
            <div class="card-title">{{ card.title }}</div>
            <div class="card-description">{{ card.description }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="bottom-nav">
      <div class="nav-item">
        <svg class="nav-icon" width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" fill="currentColor"/>
        </svg>
        <span class="nav-label">首页</span>
      </div>
      <div class="nav-item">
        <svg class="nav-icon" width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="currentColor"/>
        </svg>
        <span class="nav-label">目的地</span>
      </div>
      <div class="nav-item special">
        <div class="special-button">
          <span>秋游</span>
        </div>
      </div>
      <div class="nav-item">
        <svg class="nav-icon" width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path d="M17 6h-2V3c0-1.1-.9-2-2-2H9c-1.1 0-2 .9-2 2v3H5c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zM9 3h6v3H9V3zm9 16H6V8h12v11z" fill="currentColor"/>
        </svg>
        <span class="nav-label">行程</span>
      </div>
      <div class="nav-item">
        <svg class="nav-icon" width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" fill="currentColor"/>
        </svg>
        <span class="nav-label">我的</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { showToast } from 'vant'
import { useRouter } from 'vue-router'

const router = useRouter()

const activeTab = ref('热门')

// 检查是否为钉钉回调
const checkDingtalkCallback = () => {
  const urlParams = new URLSearchParams(window.location.search)
  const code = urlParams.get('code')
  const authCode = urlParams.get('authCode')
  const state = urlParams.get('state')

  // 如果检测到钉钉回调参数，跳转到正确的回调页面
  if (code && state) {
    // 清理URL参数，避免重复处理
    const newUrl = window.location.pathname
    window.history.replaceState({}, document.title, newUrl)

    // 跳转到钉钉回调页面，使用 code 参数（优先使用 code，兼容 authCode）
    router.push({
      path: '/dingtalk-callback',
      query: { code, state }
    })
    return true
  }
  return false
}

const tabs = [
  { id: '热门', name: '热门' },
  { id: '境外', name: '境外' },
  { id: '景区', name: '景区' },
  { id: '山川', name: '山川' },
  { id: '海岛', name: '海岛' },
  { id: 'citywalk', name: 'citywalk' }
]

const cards = [
  {
    id: 1,
    type: '路线',
    image: 'https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=400&h=200&fit=crop',
    views: 813,
    location: '苏州市',
    title: '网师园|沧浪亭十全街漫游',
    description: '网师园夜游偷师昆曲腔,沧浪亭漏窗框住宋朝光影 🌙',
    height: 'short'
  },
  {
    id: 2,
    type: '景点',
    image: 'https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?w=400&h=300&fit=crop',
    views: 78,
    location: '日本',
    title: '长野新泻周游券深度游',
    description: '玩转长野新泻:泡猴汤、访古寺、尝地酒五日巡礼 🚄 体验日本传统文化与自然风光的完美结合',
    height: 'tall'
  },
  {
    id: 3,
    image: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=400&h=250&fit=crop',
    views: 104,
    location: '荆州市',
    title: '神农架秘境导览',
    description: '华中屋脊·土家原乡·高山湿地·神农祭祀 🌲',
    height: 'medium'
  },
  {
    id: 4,
    image: 'https://images.unsplash.com/photo-1539650116574-75c0c6d73c6e?w=400&h=200&fit=crop',
    views: 102,
    location: '越南·胡志明市',
    title: '胡志明懒人地图',
    description: '粉红教堂×金融塔漫游·玩透法式南洋风情 ✨',
    height: 'short'
  },
  {
    id: 5,
    image: 'https://images.unsplash.com/photo-1546833999-b9f581a1996d?w=400&h=280&fit=crop',
    views: 396,
    location: '上海市',
    title: '上海本帮菜美食之旅',
    description: '品味地道上海味道·传统与现代的完美融合 🍜 探索魔都美食文化的独特魅力',
    height: 'tall'
  },
  {
    id: 6,
    image: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=400&h=220&fit=crop',
    views: 660,
    location: '北京市',
    title: '故宫古建筑艺术欣赏',
    description: '千年古都·皇家建筑·传统文化深度体验 🏛️',
    height: 'medium'
  },
  {
    id: 7,
    image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=200&fit=crop',
    views: 445,
    location: '杭州市',
    title: '西湖十景深度游',
    description: '断桥残雪·苏堤春晓·雷峰夕照 🏮',
    height: 'short'
  },
  {
    id: 8,
    image: 'https://images.unsplash.com/photo-1544986581-efac024faf62?w=400&h=300&fit=crop',
    views: 892,
    location: '成都市',
    title: '川西环线自驾游',
    description: '九寨沟·黄龙·稻城亚丁·色达佛学院 🏔️ 感受川西高原的壮美与神秘',
    height: 'tall'
  }
]

const setActiveTab = (tabId) => {
  activeTab.value = tabId
  showToast(`切换到${tabId}分类`)
}

const handleCardClick = (card) => {
  showToast(`点击了：${card.title}`)
}

onMounted(() => {
  checkDingtalkCallback()
})
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
}

/* 顶部状态栏 */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background-color: #ffffff;
  font-size: 14px;
  font-weight: 600;
}

.status-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.signal-bars {
  display: flex;
  gap: 2px;
  align-items: flex-end;
}

.bar {
  width: 3px;
  background-color: #000;
  border-radius: 1px;
}

.bar:nth-child(1) { height: 4px; }
.bar:nth-child(2) { height: 6px; }
.bar:nth-child(3) { height: 8px; }
.bar:nth-child(4) { height: 10px; }

.network {
  font-size: 12px;
  font-weight: 600;
}

.battery {
  width: 24px;
  height: 12px;
  border: 1px solid #000;
  border-radius: 2px;
  position: relative;
}

.battery::after {
  content: '';
  position: absolute;
  right: -3px;
  top: 3px;
  width: 2px;
  height: 6px;
  background-color: #000;
  border-radius: 0 1px 1px 0;
}

.battery-level {
  width: 80%;
  height: 100%;
  background-color: #000;
  border-radius: 1px;
}

/* 头部导航 */
.header-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
}

.nav-title {
  flex: 1;
  text-align: center;
}

.active-tab {
  font-size: 18px;
  font-weight: 600;
  color: #1976d2;
  position: relative;
}

.active-tab::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background-color: #1976d2;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.location {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.location-icon {
  color: #666;
}

.arrow-down {
  color: #666;
}

.search-icon {
  color: #666;
  cursor: pointer;
}

/* 分类标签页 */
.category-tabs {
  background-color: #ffffff;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}

.tabs-container {
  display: flex;
  gap: 24px;
  padding: 0 20px;
  overflow-x: auto;
}

.tab-item {
  font-size: 16px;
  color: #666;
  cursor: pointer;
  white-space: nowrap;
  padding: 8px 0;
  position: relative;
  transition: color 0.3s;
}

.tab-item.active {
  color: #1976d2;
  font-weight: 600;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #1976d2;
}

/* 内容区域 */
.content-area {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.cards-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-content: flex-start;
}

.content-card {
  width: calc(50% - 8px);
  min-width: 150px;
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.content-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.card-image {
  position: relative;
  overflow: hidden;
}

.card-image.short {
  height: 100px;
}

.card-image.medium {
  height: 140px;
}

.card-image.tall {
  height: 180px;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.views-count {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.eye-icon {
  width: 12px;
  height: 12px;
}

.card-type {
  position: absolute;
  top: 8px;
  left: 8px;
  background-color: #1976d2;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.card-content {
  padding: 12px;
}

.card-location {
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
}

.card-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-description {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 底部导航栏 */
.bottom-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 12px 0;
  background-color: #ffffff;
  border-top: 1px solid #f0f0f0;
  position: sticky;
  bottom: 0;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  flex: 1;
}

.nav-icon {
  color: #666;
  transition: color 0.3s;
}

.nav-label {
  font-size: 12px;
  color: #666;
  transition: color 0.3s;
}

.nav-item:hover .nav-icon,
.nav-item:hover .nav-label {
  color: #1976d2;
}

.nav-item.special {
  flex: 0 0 auto;
}

.special-button {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #ff6b35, #f7931e);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
  transition: transform 0.3s, box-shadow 0.3s;
}

.special-button:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4);
}

/* 响应式设计 */
@media (max-width: 600px) {
  .content-card {
    width: calc(50% - 6px);
    min-width: 140px;
  }
  
  .cards-grid {
    gap: 12px;
  }
  
  .content-area {
    padding: 16px;
  }
  
  .tabs-container {
    gap: 16px;
  }
  
  .tab-item {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .content-card {
    width: calc(50% - 5px);
    min-width: 120px;
  }
  
  .content-area {
    padding: 12px;
  }
  
  .cards-grid {
    gap: 10px;
  }
  
  .content-card {
    margin-bottom: 10px;
  }
  
  .tabs-container {
    gap: 12px;
  }
  
  .tab-item {
    font-size: 13px;
  }
}

/* 滚动条样式 */
.tabs-container::-webkit-scrollbar {
  display: none;
}

.content-area::-webkit-scrollbar {
  width: 4px;
}

.content-area::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.content-area::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 2px;
}

.content-area::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>